import React, { Component } from 'react'
import { View } from '@tarojs/components'
import Taro,{stopPullDownRefresh} from '@tarojs/taro'
import { observer, inject } from 'mobx-react'
import MySearch from '@/components/search'
import MyBorad from '@/components/broadList'
import MyGoods from '@/components/goods'
import Mytabbar from '@/components/tabbar'
import searchIco from '@/assets/commons/search.png'
import './index.scss'

@inject('store')
@observer
class Index extends Component {
  state = {
    searchStyle: {
      imgIcon: searchIco
    },
    searchVal: '',
    placeholder: '连衣裙',
    tabList: [
      {
        id: 1,
        cate: '',
        cate_zh: '热门'
      },
      {
        id: 2,
        cate: 'suit',
        cate_zh: '时尚套装'
      },
      {
        id: 3,
        cate: 'shirt',
        cate_zh: '衬衫'
      },
      {
        id: 4,
        cate: 'skirt',
        cate_zh: '裙子'
      },
      {
        id: 5,
        cate: 'windbreaker',
        cate_zh: '风衣'
      },
      {
        id: 6,
        cate: 'jacket',
        cate_zh: '上衣'
      },
      {
        id: 7,
        cate: 'accessories',
        cate_zh: '配饰'
      },
      {
        id: 8,
        cate: 'food',
        cate_zh: '美食'
      },
      {
        id: 9,
        cate: 'new',
        cate_zh: '上新'
      },
    ],
    searchTitle: '',
    tabStyle: {
    fontWeight: '600'
    },
    fixed: false,
    loading: true,
    page: 'index',
    search: {
      title: '',
      cate: '',
      page: 1,
      limit: 4
    }
  }
  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }
  
  onPageScroll (e) {
    e.scrollTop >= 135 ? this.setState({fixed: true}) : this.setState({fixed: false})
  }
  onReachBottom() {
    const {search} = this.state
    const {goodsStore} = this.props.store
    const newSearch = {...search}
    newSearch.page++
    console.log(search);
    setTimeout(() => {
      goodsStore.loaded ? this.setState({loading: false}) : this.setState({loading: true})
      this.setState({search: newSearch})
    }, 1000);
  }
  onPullDownRefresh() {
    const {search} = this.state
    const {goodsStore} = this.props.store
    const newSearch = {...search}
    newSearch.page = 1;
    this.setState({search: newSearch, loading: true})
    goodsStore.total != -1 && stopPullDownRefresh()
  }

  render () {
    const {
      searchStyle, 
      placeholder, 
      tabList,
      tabStyle,
      search,
      fixed,
      loading,
      page
    } = this.state
    const {goodsStore} = this.props.store

    const changeSearch = (type, val) =>{
      const newSearch = {...search}
      newSearch[type] = val
      type === 'cate' && (newSearch.title = '') 
      this.setState({
        search: newSearch,
        loading: true
      })
      goodsStore.loaded ? this.setState({loading: false}) : this.setState({loading: true})
    }
    const getGoodsInfo = (data) => {
      console.log(data);
      Taro.navigateTo({
        url: '/pages/detail/detail?data=' + JSON.stringify(data)
      })
    }

    return (
      <View className="container">
        <MySearch 
          searchStyle={searchStyle} 
          placeholder={placeholder} 
          onChange={changeSearch} 
        />
        <MyBorad />
        <Mytabbar 
          list={tabList} 
          value={search.cate} 
          style={tabStyle} 
          onChange={changeSearch}
          fixed={fixed} 
        />
        <MyGoods search={search} onClick={getGoodsInfo}/>
        {loading ? <View className="loading">加载中...</View> : <View className="loading">加载完成</View>}
      </View>
    )
  }
}

export default Index
